import React, { Component } from 'react';
import './App.css';
import Input from './Components/Todo/Input'
import List from './Components/Todo/List'


export default class App extends Component {

  state = {
    list: [
      {
        id: new Date().getTime(),
        title: '写作业',
        isDone: false
      }
    ]
  }

  addList(title) {
    let list = this.state.list;
    console.log('list', list);

    list.push({
      id: new Date().getTime(),
      title: title,
      isDone: false
    });

    this.setState({ list: list })

  }

  editList(id, title) {
    let list = this.state.list;
    list.forEach((item) => {
      if (item.id === id) {
        item.title = title;
      }

    });
    this.setState({ list: list })
  }

  delList(id) {
    let list = this.state.list;
    list.forEach((item, i) => {
      if (item.id === id) {
        list.splice(i, 1)
      }
    });

    this.setState({ list: list })
  }

  isDone(id, isDone) {
    console.log('id', id);
    console.log('isDone', isDone);
    let list = this.state.list;
    list.forEach((item) => {
      if (item.id === id) {
        item.isDone = isDone;
      }
    })

    this.setState({ list: list })
  }



  render() {
    let list = this.state.list;
    return (
      <div>
        <h2>Todo list</h2>
        <Input addList={this.addList.bind(this)} ></Input>
        <List list={list} isDone={this.isDone.bind(this)} editList={this.editList.bind(this)} delList={this.delList.bind(this)} ></List>

      </div>
    )
  }
}




